<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules//vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
         <ul>
            <li v-for="user in userList">
                {{user.id}} -- {{user.name}} -- {{user.gander | gFilter}}
            </li>
         </ul>
    </div>
    
</body>
<script>

    Vue.filter('gFilter',function(val){
        if(val == 1)return '男~'
        else return '女~'
    })
    new Vue({
        el: "#app",
        data:{
            userList:[
                {id:1,name:'jack',gander:1},
                {id:2,name:'peter',gander:0}
            ]
        },
        computed: {//计算属性
            taotalPrice(){
                return this.xyjPrice*this.xyjNum + this.shzNum*this.shzPrice;
            }
        },
        filters:{
            ganderFilter(val){
                if(val == 1)return '男'
                else return '女'
            }
        }
    })

</script>

</html>